<template>
  <Box v-bind="$attrs" ref="boxRef" :args="length">
    <TresMeshToonMaterial color="orange" :opacity="0.5" :transparent="true" />
    <Line2
      v-for="(line, index) in data.lines"
      :key="index"
      :points="line"
      color="red"
    />
  </Box>
</template>
<script lang="ts" setup>
import { Box, Line2 } from '@tresjs/cientos'
import { useRenderLoop } from '@tresjs/core'
import * as THREE from 'three'
import { Cube } from '../../hooks/shapes'

const props = defineProps<{
  data: Cube
}>()

const boxRef = shallowRef()

const { onLoop } = useRenderLoop()

onLoop(() => {
  boxRef.value.instance.rotation.fromArray(props.data.rotation)
  boxRef.value.instance.position.fromArray(props.data.position)
  boxRef.value.instance.scale.fromArray(props.data.scale)
})

const length = shallowRef<any>([1, 1, 1])

onBeforeMount(() => {
  const p1 = new THREE.Vector3().fromArray(props.data.vertices[0])
  const p2 = new THREE.Vector3().fromArray(props.data.vertices[1])
  const distance = p1.distanceTo(p2)
  length.value = [distance, distance, distance]
})
</script>
